<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/pricingCards.css">

    <title>Plan Pricing Cards</title>
</head>

<body>
    <section class="section-tours" id="blur">
        <div class="u-center-text u-margin-bottom-big">
            <h2 class="heading-secondary">
                Most Popular Tours
            </h2>
        </div>

        <div class="row">
            <div class="col-1-of-3">
                <div class="card">
                    <div class="card__side card__side--front">
                        <div class="card__picture card__picture--1">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--1">
                                The Sea Explorer
                            </span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>3 day tours</li>
                                <li>Up to 30 people</li>
                                <li>2 tour guides</li>
                                <li>Sleep in cozy ride</li>
                                <li>Difficulty: easy</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card__side card__side--back card__side--back--1">
                        <!-- call to action box -->
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">
                                    Only
                                </p>
                                <p class="card__price-value">
                                    $297
                                </p>
                            </div>
                            <a href="#" onclick="toggle()" class="btn btn--white"> Book now!</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-1-of-3">
                <div class="card">
                    <div class="card__side card__side--front">
                        <div class="card__picture card__picture--2">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--2">
                                The Forest Hiker
                            </span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>7 day tours</li>
                                <li>Up to 40 people</li>
                                <li>6 tour guides</li>
                                <li>Sleep in provided tents</li>
                                <li>Difficulty: medium</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card__side card__side--back card__side--back--2">
                        <!-- call to action box -->
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">
                                    Only
                                </p>
                                <p class="card__price-value">
                                    $497
                                </p>
                            </div>
                            <a href="#" onclick="toggle()" class="btn btn--white"> Book now!</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-1-of-3">
                <div class="card">
                    <div class="card__side card__side--front">
                        <div class="card__picture card__picture--3">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--3">
                                The Snow adventurer
                            </span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>5 day tours</li>
                                <li>Up to 15 people</li>
                                <li>3 tour guides</li>
                                <li>Sleep in provided tents</li>
                                <li>Difficulty: hard</li>
                            </ul>
                        </div>
                    </div>
                    <div class="card__side card__side--back card__side--back--3">
                        <!-- call to action box -->
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">
                                    Only
                                </p>
                                <p class="card__price-value">
                                    $897
                                </p>
                            </div>
                            <a href="#" onclick="toggle()" class="btn btn--white"> Book now!</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="popup" id="popup">
        <div class="popup__content">
            <div class="popup__left">
                <img src="../assets/Images/PricingCards/nat-8.jpg" alt="Tour photo" class="popup__image">
                <img src="../assets/Images/PricingCards/nat-9.jpg" alt="Tour photo" class="popup__image">
            </div>
            <div class="popup__right">
                <a href="#" onclick="toggle()" class="popup__close">&times;</a>
                <h2 class="heading-secondary u-margin-bottom-small">
                    Start booking now
                </h2>
                <h3 class="heading-tertiary u-margin-bottom-small">
                    Important &ndash; Please read these terms before booking
                </h3>
                <p class="popup__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Tortor
                    condimentum lacinia quis vel eros donec ac odio. Ultricies leo integer malesuada nunc vel risus
                    commodo viverra. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus.
                    Rhoncus
                    urna neque viverra justo nec. Morbi leo urna molestie at elementum. Sodales ut etiam sit amet
                    nisl
                    purus in mollis nunc. Netus et malesuada fames ac turpis. Vitae sapien pellentesque habitant
                    morbi
                    tristique. Sit amet massa vitae tortor. Sit amet aliquam id diam maecenas ultricies mi eget
                    mauris.

                </p>
                <a href="#" onclick="toggle()" class="btn btn--green">Book now</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function toggle() {
            var blur = document.getElementById('blur');
            blur.classList.toggle('active');
            var pop_up = document.getElementById('popup');
            pop_up.classList.toggle('active');
        }
    </script>

</body>

</html>